<template>
  <div class="cart-wrap">
    <header>
      我的购物车
      <p v-if="!flag" v-show="chuxian" @click="change">编辑</p>
      <p v-if="!chuxian" @click="change">完成</p>
    </header>
    <div class="main-wrap">
      <no-shop v-if="flag"></no-shop>
      <have-shop v-if="!flag" :active="chuxian" ></have-shop>
    </div>
  </div>
</template>

<script>
import NoShop from "./Cart/NoShop";
import HaveShop from "./Cart/HaveShop";
export default {
  data() {
    return {
      flag: false,
      chuxian: true,
      num: 0,
    };
  },
  components: {
    NoShop,
    HaveShop,
  },
  methods: {
    change() {
      this.num++;
      if (this.num % 2 !== 0) {
        this.chuxian = true;
      } else {
        this.chuxian = false;
      }
    },

  },
};
</script>


<style lang="stylus" scoped>
header {
  height: 45px;
  width: 100%;
  text-align: center;
  line-height: 45px;
  font-size: 16px;
  color: #333333;
  font-weight: Bold;
  position: fixed;
  top: 0;
  background: #fff;
  margin-bottom: 9px;
  border-bottom: 2px solid #ededed;

  p {
    position: absolute;
    right: 20px;
    bottom: 0;
  }
}

.cart-wrap {
  padding-top: 45px;
  flex: 1;
  display: flex;
  flex-direction: column;

  .main-wrap {
    flex: 1;
    background: #f4f4f4;
  }
}
</style>